<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        autofocus=""
        autocomplete="off"
        placeholder="What needs to be done?"
        v-model="newTodoRef"
        @keyup.enter="addTodo"
      />
    </header>
    <section class="main" v-show="todoRef.length > 0">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="allDoneRef"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          class="todo"
          v-for="r in listRef"
          :key="r.id"
          :class="{ completed: r.completed, editing: r === editRef }"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="r.completed" />
            <label @dblclick="editTodo(r)">{{ r.title }}</label>
            <button class="destroy" @click="remove(r)"></button>
          </div>
          <input
            class="edit"
            type="text"
            v-model="r.title"
            @blur="doneTodo"
            @keyup.enter="doneTodo"
            @keyup.escape="cancleEdit"
          />
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="todoRef.length > 0">
      <span class="todo-count">
        <strong>{{ remainingRef }}</strong>
        <span>items left</span>
      </span>
      <ul class="filters">
        <li>
          <a href="#/all" :class="{ selected: vistibilityRef == 'all' }">All</a>
        </li>
        <li>
          <a href="#/active" :class="{ selected: vistibilityRef == 'active' }"
            >Active</a
          >
        </li>
        <li>
          <a
            href="#/completed"
            :class="{ selected: vistibilityRef == 'completed' }"
            >Completed</a
          >
        </li>
      </ul>
      <button
        class="clear-completed"
        v-show="remainingRef > 0"
        @click="removeCompleted"
      >
        Clear completed
      </button>
    </footer>
  </section>
</template>

<script>
import useTodoList from "./compositions/useTodoList";
import useNewTodo from "./compositions/useNewTodo";
import useFilter from "./compositions/useFilter";
import useEditTodo from "./compositions/useEditTodo";
import useRemoveTodo from "./compositions/useRemoveTodo";
export default {
  name: "App",
  setup() {
    const { todoRef } = useTodoList();
    return {
      todoRef,
      ...useNewTodo(todoRef),
      ...useFilter(todoRef),
      ...useEditTodo(todoRef),
      ...useRemoveTodo(todoRef),
    };
  },
};
</script>
